import './siderMenu.scss';
import { cssPrefix } from '../baseData';

import React from 'react';
import { Link, NavLink } from 'react-router-dom'


import Menus from './menuData';

const MENUS = new Menus();

export default class Menu extends React.Component {
  constructor(props){

    super(props);

    this.state = {
      menuData: MENUS
    };

  }

  toggleNav(index){
    let { menuData } = this.state;
    for(let i=0,iLen=menuData.length; i<iLen; i++){
      if(menuData[i].show){
        menuData[i].show = false;
        break;
      }
    }

    menuData[index].show = true;


    this.setState({menuData});


  }

  componentWillMount(){

  }

  render(){

    let { menuData } = this.state,
      menu = menuData.map((data, index) => {
        return <li className={data.show ? `${cssPrefix}sider-menu-item ` : `${cssPrefix}sider-menu-item`} key={ index }>
          <NavLink
            className={`${cssPrefix}sider-menu-item-bar`}
            to={data.path}
            activeClassName="active"
            onClick={this.toggleNav.bind(this, index)}
            isActive={(match, location)=>{
              if(data.path == '/'){
                return data.path == location.pathname;
              }else{
                return location.pathname.match(data.type)
              }
            }}>
            <span className="pull-left">{data.name}</span>
            {data.sub && data.sub.length && <span className="pull-right icon-down" />}
          </NavLink>
          {
            data.sub && data.sub.length && <ul className={`${cssPrefix}sider-sub-menu`}>
              {
                data.sub.map((subMenu, i) => {
                  return <li className={`${cssPrefix}sider-sub-menu-item`} key={index + '_' + i}>
                    <NavLink to={subMenu.path} activeClassName="current">
                      {subMenu.name}
                    </NavLink>
                  </li>
                })
              }
            </ul>
          }
        </li>
      });


    return (
      <ul className={`${cssPrefix}sider-menu`}>
        {menu}
      </ul>
    )
  }
}